<template>
  <div class="myCollection">
    <div class="nav-top">
      <div
        v-for="(item, index) in tabsList"
        :key="index"
        :class="current === index ? 'active' : ''"
        @click="goPage(item, index)"
      >
        {{ item.title }}
      </div>
    </div>
    <div>
      <component :is="activeRoute" @userInfo="getUserInfo" />
    </div>
  </div>
</template>

<script>
import course from "./course.vue";
import Field from "./field.vue";
import dynamic from "./dynamic.vue";
import topic from "./topic.vue";
import practiceBase from "./practiceBase.vue";
import collection from "./collection.vue";
import { userInfo } from "@/api/otwoo.js";
export default {
  data() {
    return {
      current: 0,
      activeRoute: "course",
      tabsList: [
        { title: "课程", routeName: "course" },
        { title: "场地", routeName: "field" },
        { title: "实践基地", routeName: "practiceBase" },
        { title: "话题", routeName: "topic" },
        { title: "动态", routeName: "dynamic" },
        // { title: "收藏", routeName: "collection" },
      ],
    };
  },
  mounted(){
    this.$store.commit("SET_PERLEFTMENUSHOW", true);
  },
  components: { course, Field, practiceBase, dynamic, topic ,collection},
  methods: {
    goPage(item, index) {
      this.activeRoute = item.routeName;
      this.current = index;
    },
    // 更新收藏信息
    getUserInfo() {
      userInfo().then((res) => {
        if (res.success) {
          this.$addStorageEvent("userInfo", JSON.stringify(res.result));
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.myCollection {
  width: calc(1650 / 1920 * 100vw);
  background: #fff;
  position: absolute;
  top: calc(350 / 1920 * 100vw);
  left: calc(240 / 1920 * 100vw);
  padding: calc(10 / 1920 * 100vw) calc(40 / 1920 * 100vw)
    calc(40 / 1920 * 100vw);
  .nav-top {
    display: flex;
    position: absolute;
    top: calc(-40 / 1920 * 100vw);
    left: calc(0 / 1920 * 100vw);
    div {
      width: calc(120 / 1920 * 100vw);
      height: calc(40 / 1920 * 100vw);
      text-align: center;
      line-height: calc(40 / 1920 * 100vw);
    }
    .active {
      background: #fff;
      border-radius: calc(10 / 1920 * 100vw) calc(10 / 1920 * 100vw) 0px 0px;
    }
  }
}
</style>
